<template v-model="ModeVisible">
  <!-- 查看详情 -->
  <ReDialog :width="700" :height="550" :models="ModeVisible" @Closes="hideDialog">
    <template #header>
      <h2 style="text-align: center;">{{ mytype === '2' ? '企业模板详情' : '个人模板详情' }}</h2>
    </template>
    <template #main>
      <el-scrollbar height="480px">
        <h3 style="text-align: left;">模型名称：{{ porps.ModeDetails_.data.modelName }}</h3>
        <!-- 个人 -->
        <div v-if="mytype === '1'">

          <div class="modeForm" v-for="(m, l) in mydata.behavioralTrait" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>行为特质</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor1">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="modeForm" v-for="(m, l) in mydata.capacityPerform" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>履约能力</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor2">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="modeForm" v-for="(m, l) in mydata.creditHistory" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>信用历史</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor3">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="modeForm" v-for="(m, l) in mydata.identityTrait" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>身份特质</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor4">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="modeForm" v-for="(m, l) in mydata.interpersonalRelationship" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>人脉关系</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor5">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 企业 -->
        <div v-if="mytype === '2'">
          <div class="modeForm" v-for="(m, l) in mydata.developmentProspect" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>企业基础信息</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor1">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="modeForm" v-for="(m, l) in mydata.economicStrength" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>经济实力</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor2">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="modeForm" v-for="(m, l) in mydata.enterpriseCondition" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>企业状况</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor3">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="modeForm" v-for="(m, l) in mydata.enterpriseMsg" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>企业基础信息</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor4">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="modeForm" v-for="(m, l) in mydata.fundStructure" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>资金结构</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor5">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="modeForm" v-for="(m, l) in mydata.leadershipQuality" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>领导者素质</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor6">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="modeForm" v-for="(m, l) in mydata.operatingBenefit" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>经营效益</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor7">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div class="modeForm" v-for="(m, l) in mydata.reputationStatus" :key="l">
            <div class="show_view" v-for="(t, y) in m.children" :key="y">
              <div class="show_view_title">
                <span>信誉状况</span>
                <span :title="m.label">{{ m.label }}</span>
                <span :title="t.label">{{ t.label }}</span>
              </div>
              <div class="show_view_list show_left_bor8">
                <p class="view_list1">{{ m.label }}</p>
                <p class="view_list2">{{ t.label }}</p>
                <div class="show_view_lists">
                  <dl v-for="(x, c) in t.children" :key="c">
                    <dd>{{ x.text }} </dd>
                    <dd><span>{{ x.score }} 分</span></dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>

      </el-scrollbar>
    </template>
    <template #footer>
    </template>
  </ReDialog>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps, watch } from "vue";
// import { mydata } from "../component/data"
const ModeVisible = ref<boolean>(false);
const mydata = ref();
const mytype = ref();
const porps = defineProps({
  ModeDetails_: {
    type: Object
  }
})

watch(porps, newval => {
  if (newval.ModeDetails_.data) {
    mydata.value = newval.ModeDetails_.data;
    mytype.value = newval.ModeDetails_.type
  }
})

function hideDialog() {
  ModeVisible.value = false;
  mytype.value = '0'
}

defineExpose({
  ModeVisible
})

</script>

<style lang="scss" scoped>
.modeForm {
  width: 95%;
  margin: 0 auto;
  margin-top: 15px;
  font-size: 14px;

  .el_sel_btn {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .show_view {
    text-align: left;
    position: relative;


    .show_view_title {
      width: 75%;
      text-align: left;
      font-weight: bold;
      display: flex;
      justify-content: space-between;

      span {
        width: 30%;
        line-height: 32px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 设置元素的宽度 */

      }

      // position: absolute;
      // top: 0;
    }

    .show_view_list {
      // position: relative;
      // top: 25px;
      margin-top: 1px;
      padding-left: 10px;

      .view_list1 {
        line-height: 28px;
      }

      .view_list2 {
        margin-left: 20px;
        line-height: 28px;
      }

      .show_view_lists {
        margin-left: 40px;
      }

      dl {
        display: flex;
        align-items: center;

        dd {
          min-width: 150px;
          margin-right: 10px;
          line-height: 28px;
        }

        span {
          margin-left: 5px;
          color: red;
        }
      }
    }
  }
}

.zhushi {
  text-align: left;
  margin-bottom: 15px;
  padding-left: 17%;
}

.show_left_bor1 {
  border-left: 3px solid #409eff;
}

.show_left_bor2 {
  border-left: 3px solid #bd9b40;
}

.show_left_bor3 {
  border-left: 3px solid #67c23a;
}

.show_left_bor4 {
  border-left: 3px solid #305a91;
}

.show_left_bor5 {
  border-left: 3px solid #913089;
}

.show_left_bor6 {
  border-left: 3px solid #b4a02a;
}

.show_left_bor7 {
  border-left: 3px solid #117d8b;
}

.show_left_bor8 {
  border-left: 3px solid #6e151a;
}
</style>
